<h1 class="crayons-title mb-1">
  Posts
  <% if params[:state] && params[:state].include?("top-") && params[:state] != "top-3" && params[:state] != "top-6" %>
    <%= params[:state] %>-months
  <% end %>
</h1>

<nav class="mb-2 flex justify-between items-center" aria-label="Posts">
  <ul class="crayons-navigation crayons-navigation--horizontal">
    <li>
      <a href="<%= admin_articles_path %>" class="crayons-navigation__item <%= "crayons-navigation__item--current" if params[:state].blank? %>">Hot</a>
    </li>
    <li>
      <a
        href="<%= admin_articles_path(state: :chronological) %>"
        class="crayons-navigation__item <%= "crayons-navigation__item--current" if params[:state] == "chronological" %>">Chronological</a>
    </li>
  </ul>
</nav>

<%= paginate @articles %>

<div id="member-index-content"
  class="flex flex-col gap-4"
  data-controller="article-pinned-modal"
  data-article-pinned-modal-root-selector-value="#article-pin-modal-root"
  data-article-pinned-modal-content-selector-value="#article-pin-modal"
  data-article-pinned-modal-title-value="There's another article pinned..."
  data-article-pinned-modal-size-value="m"
  data-article-pinned-modal-cancel-button-id-value="article-pin-modal-cancel"
  data-article-pinned-modal-ok-button-id-value="article-pin-modal-ok"
  data-action="article-pinned-modal:open@document->article-pinned-modal#openModal">

  <% if @pinned_article.present? %>
    <div class="crayons-card crayons-card--elevated p-2">
      <h2 class="crayons-subtitle-1 flex gap-2 items-center mb-2 p-2"><%= crayons_icon_tag("pin.svg") %> Pinned Article</h2>
      <%= render partial: "article_item", locals: { article: @pinned_article } %>
    </div>
  <% end %>

  <% if @featured_articles.present? %>
    <div class="crayons-card p-3">
      <h2 class="crayons-subtitle-1 flex gap-2 items-center mb-2">Manually Featured Articles</h2>
      <%= render partial: "article_item", collection: @featured_articles, as: :article %>
    </div>
  <% end %>

  <%= render partial: "article_item", collection: @articles, as: :article %>
  <%= paginate @articles %>

  <%= render partial: "pinned_article_modal" %>
</div>

<%= render partial: "image_upload_script" %>
<%= javascript_include_tag "admin/convertUserIdsToUsernameInputs" %>
